import React from 'react';
import {
  Card,
  CardContent,
  CardActions,
  Typography,
  Box,
  Chip,
  Button,
  alpha
} from '@mui/material';
import { LocationOn, Event } from '@mui/icons-material';

function ResourceCard({ resource, onClick }) {
  return (
    <Card 
      sx={{ 
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        position: 'relative',
        overflow: 'visible',
        '&::before': {
          content: '""',
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          height: 4,
          bgcolor: 'primary.main',
          borderTopLeftRadius: 12,
          borderTopRightRadius: 12,
        }
      }}
    >
      <CardContent sx={{ flexGrow: 1, pt: 3 }}>
        <Typography 
          variant="h6" 
          gutterBottom
          sx={{ 
            color: 'primary.main',
            fontWeight: 600
          }}
        >
          {resource.title}
        </Typography>
        
        <Box sx={{ mb: 2 }}>
          <Typography 
            variant="body2" 
            color="text.secondary"
            sx={{ 
              display: 'flex',
              alignItems: 'center',
              mb: 0.5
            }}
          >
            <LocationOn sx={{ mr: 1, fontSize: 18 }} />
            {resource.address}
          </Typography>
          {resource.time && (
            <Typography 
              variant="body2" 
              color="text.secondary"
              sx={{ 
                display: 'flex',
                alignItems: 'center'
              }}
            >
              <Event sx={{ mr: 1, fontSize: 18 }} />
              {resource.time}
            </Typography>
          )}
        </Box>

        <Box sx={{ mb: 2 }}>
          {resource.tags.map(tag => (
            <Chip
              key={tag}
              label={tag}
              size="small"
              sx={{
                mr: 0.5,
                mb: 0.5,
                bgcolor: alpha(theme => theme.palette.primary.main, 0.1),
                color: 'primary.main',
              }}
            />
          ))}
        </Box>

        <Typography 
          variant="body2" 
          color="text.secondary"
          sx={{ 
            display: '-webkit-box',
            WebkitLineClamp: 3,
            WebkitBoxOrient: 'vertical',
            overflow: 'hidden'
          }}
        >
          {resource.description}
        </Typography>
      </CardContent>
      
      <CardActions sx={{ p: 2, pt: 0 }}>
        <Button
          fullWidth
          variant="outlined"
          onClick={() => onClick(resource)}
          sx={{
            borderRadius: 20,
          }}
        >
          查看详情
        </Button>
      </CardActions>
    </Card>
  );
}

export default ResourceCard; 